<template>
	<sw-form-frame v-model="visible" :title="formName" width="640" :type="formType" :loading="btnLoading" footer @submit="handleSubmitForm()">
		<el-form size="medium" ref="form" :model="formData" :rules="formRules" label-width="80px" v-loading="loading">
			<el-form-item label="配置名称" prop="name">
				<el-input v-model="formData.name" placeholder="请输入配置名称"></el-input>
			</el-form-item>
			<el-form-item label="配置描述" prop="content">
				<el-input type="textarea" v-model="formData.content" placeholder="请输入配置描述"></el-input>
			</el-form-item>
			<el-row :gutter="32">
				<el-col :span="12">
					<el-form-item label="配置类型" prop="type">
						<el-select v-model="formData.type" placeholder="请选择配置类型" style="width: 100%">
							<template v-for="(item, index) in dictEnums['SYSTEM_BASE_CONFIG']">
								<el-option :label="item.msg" :value="item.value"></el-option>
							</template>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排序" prop="sort">
						<el-input-number v-model="formData.sort" controls-position="right"></el-input-number>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="配置字典" prop="filed14">
				<el-select v-model="formData.filed14" filterable placeholder="请选择配置字典" style="width: 100%" @change="handleSelectChange">
					<el-option v-for="(item, index) in surplusDictData" :key="index" :value="item.id" :label="item.content" :disabled="item.disabled">
						<h4>{{ item.content }}</h4>
						<em>{{ item.code }}</em>
						<p>{{ item.configJson | dictConfigTypeName(dictConfigType) }}</p>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="单选选项" prop="filed22" v-if="isRadioType">
				<sw-table-form ref="option" v-model="formData.options" :is-img="formData.filed1 === '4'">
					<template slot-scope="{ data }">
						<input-uploader v-model="data.img"></input-uploader>
					</template>
				</sw-table-form>
			</el-form-item>
			<el-row :gutter="32" v-else-if="formData.filed1 === '1'">
				<el-col :span="12">
					<el-form-item label="标题" prop="filed19">
						<el-input v-model="formData.filed19" placeholder="请输入标题"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="单位" prop="filed20">
						<el-input v-model="formData.filed20" placeholder="请输入单位"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</sw-form-frame>
</template>

<script>
import { mapGetters } from 'vuex';
import radioOption from './options';
import inputUploader from './uploader';
import formMixins from '@/mixins/formMixins';
import { getDictDefineList } from '@/api/system/tbSysDictDefinition';
import { queryConfig, addedConfig, updateConfig } from '@/api/system/tbSysConfig';
export default {
	mixins: [formMixins],
	components: { radioOption, inputUploader },
	props: {
		type: { type: String, default: '' }
	},
	data() {
		return {
			formName: '配置',
			formRules: {
				name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
				type: [{ required: true, message: '请选择配置类型', trigger: 'change' }],
				filed1: [{ required: true, message: '请选择配置类型', trigger: 'change' }],
				filed14: [{ required: true, message: '请选择配置标识', trigger: 'change' }],
				filed22: [{ required: true, message: '请填写单选选项', trigger: 'change' }]
			},
			originalData: {},
			dictlistData: []
		};
	},
	filters: {
		dictConfigTypeName(input, list) {
			let info = list.find((n) => n.type === input);
			return !info ? '--' : info.label;
		}
	},
	computed: {
		...mapGetters(['siteConfig']),
		detailData() {
			return eval(queryConfig);
		},
		callFunction() {
			return eval(this.addOrEdit ? addedConfig : updateConfig);
		},
		isRadioType() {
			return ['3', '4'].some((n) => n === this.formData.filed1);
		},
		surplusDictData() {
			let dictConstData = this.dictlistData.filter((n) => n.type === '2');
			let dictDisabledData = dictConstData.map((item) => {
				let obj = { ...item };
				let isExist = this.siteConfig.some((n) => n.filed14 === item.id);
				obj['disabled'] = isExist && this.originalData.filed14 !== item.id;
				return obj;
			});
			let dictSurplusData = dictDisabledData.filter((n) => !n.disabled);
			return this.addOrEdit ? dictSurplusData : dictDisabledData;
		},
		dictEnumData() {
			return this.dictlistData.filter((n) => n.type === '1');
		},
		submitParams() {
			let params = { ...this.formData };
			if (params.options.length > 0) {
				params['filed22'] = JSON.stringify(params.options);
			} else {
				params['filed22'] = '';
			}
			delete params.options;
			return params;
		}
	},
	mounted() {
		this.getDictDefineData();
	},
	methods: {
		//通过编码获取字典定义数据
		async getDictDefineData() {
			let params = { page: 1, limit: 99999999, type: '2', isConfig: '1' };
			let result = await getDictDefineList(params).then((res) => res.data);
			if (result.code === '0') {
				this.dictlistData = result.data || [];
			}
		},

		formatFormParams() {
			let optionJson = this.formData.filed22;
			this.originalData = this.$deepClone(this.formData);
			if (this.addOrEdit) {
				this.$set(this.formData, 'type', this.type);
			} else if (this.$isJSON(optionJson)) {
				this.$set(this.formData, 'options', JSON.parse(optionJson));
			} else {
				this.$set(this.formData, 'options', []);
			}
		},

		//配置字典变化
		handleSelectChange(id) {
			let info = this.dictlistData.find((n) => n.id === id);
			this.$set(this.formData, 'filed1', info.configJson);
			this.$set(this.formData, 'filed13', info.code);
		},

		async beforeSubmitForm() {
			let childValid = await this.$refs['option'].validChildForm();
			return Promise.resolve(childValid);
		},

		//更新本地存储
		updateStoreData() {
			this.$store.dispatch('getSiteConfig');
		}
	}
};
</script>
